<template>
  <c-webview :src="src" @message="messageHandler" @error="errorHandler" />
</template>

<script>
import CWebview from '@/components/c-webview/c-webview.vue'

export default {
  name: 'WebView',
  components: {
    CWebview
  },
  data() {
    return {
      src: ''
    }
  },
  async onReady() {
    const url = await this.getUrl()
    this.src = url
  },
  methods: {
    /**
     * 根据传递的src生成webview跳转的url
     * @param {string} src 路径名称
     * @returns {string} url
     */
    async getUrl() {
      const { url } = this.$mp.query
      return decodeURI(url)
    },
    // h5页面向小程序postMessage时在特定时机触发的消息回调
    messageHandler({ detail }) {
      console.log('message', detail)
    },
    // 网页加载失败回调（微信小程序）
    errorHandler(e) {
      if (e.detail && e.detail.fullUrl) {
        console.error(`web页面加载失败, url: ${e.detail.fullUrl}`)
      }
    }
  }
}
</script>
